<template>
  <div>
    <BorderBox9>
      <div id="container">
        
      </div>
    </BorderBox9>
  </div>
</template>
<script setup>
// 导入高德地图
import AMapLoader from "@amap/amap-jsapi-loader";
import {BorderBox9} from '@kjgl77/datav-vue3'
import {onMounted} from 'vue'
import autofit,{elRectification} from 'autofit.js'

let map=null;//存储生成的地图实例
onMounted(()=>{
  AMapLoader.load({
    key:"1c5f475b8a1c15525e1c1e94c33137ab",
    version:"2.0",
    plugins:[] //插件 
  }).then((AMap)=>{
      // 初始化地图实例
      map=new AMap.Map("container",{
        viewMode:"3D",
        zoom:11,
        center:[116.397428,39.90923]
      })
      // 添加标记点
      const points = [
          {
            id:1,
            position: [116.368904, 39.90923],
            name: '点1',
          },
          {
            id:2,
            position: [116.487428, 39.912501],
            name: '点2',
          }
          // 可以添加更多点
        ];
        points.forEach(item=>{
            let makers=new AMap.Marker({
              position:item.position,
              label:item.name
            })
          map.add(makers)
          makers.on("click",(item)=>{
             console.log(item,"经纬度")
             let mypos=null;
              navigator.geolocation.getCurrentPosition((postion)=>{
                console.log(postion,"当前经纬度")
                 mypos=[116.387271, 39.912501]
              })
              // 开车的路径规划
              //   AMap.service(['AMap.Driving'], () => {
              //   const driving = new AMap.Driving({
              //     map: map
              //   });
              // // 根据起终点经纬度规划驾车导航路线
              // driving.search(new AMap.LngLat(item.pos), new AMap.LngLat(mypos));
              // });
        })
      })
      //  高德地图绘制线
      
         // 绘制线
        let polyline = new AMap.Polyline({
            path: [
                new AMap.LngLat(116.368904, 39.913423),
                new AMap.LngLat(116.382122, 39.901176),
                new AMap.LngLat(116.387271, 39.912501),
                new AMap.LngLat(116.398258, 39.904600)
            ], // 线的坐标数组
            strokeColor: 'blue', // 线的颜色
            strokeWeight: 6, // 线的宽度
            map: map // 指定将线绘制在哪个地图实例上
        });


          // MassMarks 高德海量加点
        // const markerList = points.map((item) => ({
        //     lnglat: item.position,
        //     name: item.name,
        //     id: item.id,
        // }))
        //  massMarks = new AMap.MassMarks(markerList, {
        //     zIndex: 500,  // 海量点图层叠加的顺序
        //     zooms: [3, 14],  // 在指定地图缩放级别范围内展示海量点图层
        // });
        // // massMarks.setMap(map);
        // map.add(massMarks)


  }).catch(e=>{
    console.log
  })

 
})

</script>
<style lang="scss">
  #container{
    width: 1100px;
    height: 1000px;
    position: absolute;
  }

</style>